<template>
    <div>
       <shops_top :tabstr="'Commodity'" v-if="hackitem"></shops_top>
      <div class="manage-content">
        <div class="left-content" style="overflow: scroll;">
          <ul class="nav-list">
            <li class="list-li active" @click="zhekou(1)">
              全部商品
            </li>
            <li class="list-li" @click="zhekou(2)" >
              <i class="icon"></i>
              特价商品
            </li>
            <li class="list-li" @click="zhekou(3)" v-show="false">
              <i class="icon icon1"></i>
              热销商品
            </li>
            <li class="list-li" @click="zhekou(4)" v-show="false">
              <i class="icon icon2"></i>
              新品力荐
            </li>
            <li class="list-li" v-for="item in GoodsTypeCustom" :key="item.id" @click="shop_shangpin(item.id,item.name)">
              {{item.name}}
            </li>
          </ul>
        </div>
        <div class="right-content">
          <h3 class="title"><i class="icon"></i>{{btName}}</h3>
          <div class="list_s" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
             <div class="tab-content" v-for="item in goodsShop" :key="item.goodsId" >
            <router-link :to="{name:'Commodity_details',query:{id:item.goodsId,subid:0}}">
            <div class="bottom-info">
              <div class="bottom-info-tab">
                <ul class="list-ul">
                  <li class="list-li">
                    <div class="left-con">
                      <img :src=item.goodsThum alt="">
                    </div>
                    <div class="right-con">
                      <h4 class="title1" style="height: 1.5rem;font-size: 0.8rem;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;"><p >{{item.goodsName}}</p></h4>
                      <div class="card-info-con" >
                        <div class="price2" v-show="item.price>0">原价￥{{item.goodsScreenPrice | amountMin100(0)}} </div>
                      </div>
                      <div class="price-info" v-if="item.price>0">
                        <div class="price1"  v-if="(item.goodsScreenPrice-item.price)<0"><span>券后￥0元</span></div>
                        <div class="price1"  v-else><span>券后￥{{(item.goodsScreenPrice-item.price) |amountMin100(0)}}</span></div>
                        <p class="card-info">{{item.price | amountMin100(0)}}元券 </p>
                      </div>
                      <div class="price-info" v-else>
                         <s style="margin-right:15px; color: black; " v-if="item.goodsRealPrice!=item.goodsScreenPrice" v-show="item.discount==1">原价{{item.goodsRealPrice| amountMin100(2)}}</s>
                         <div class="price1"><span>现价￥{{item.goodsScreenPrice | amountMin100(2)}}</span></div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            </router-link>
          </div>
            <loadingtmp :busy="busy" :datalength="goodsShop.length" :loadall="loadall"></loadingtmp>
          </div>
        </div>
      </div>
    </div>
</template>
<style scoped>
  @import "../../../assets/personal/css/commodity.css";
  .jinqian{
    margin-left: 6rem;
  }
  .list_s{
    height:36rem;
    width: 100%;
    overflow: scroll;
  }
  .nav-list{
    height: 36rem;
    overflow:scroll
  }
</style>
<script>
import shops_top from "@/components/personal/Shops_top";
import loadingtmp from '@/components/load/loading'
export default {
  data () {
    return {
     pageName:"Commodity",
     shopsID:'',
     GoodsTypeCustom:{},
     indx:'1',
     goodsShop:{},
     coupon:{},
     quan:{},
     btName:"全部商品",
     type_sp:1,
     shops_type:'',
     page:1,
     pageSize:10,
     busy:false,
     loadall: false,
     apitype:0,
     hackitem:false,
     title:'',
     img:'',
     shuoming:'',
    }
  },
    components:{
        shops_top,
        loadingtmp
    },
    created(){
      // 第一次
    },
    mounted (){
      this.shops_liebiao();
      this.zhekou();
      $(function () {
        /*tab*/
        $(document).on('click','.list-li',function(){
          $(this).addClass("active").siblings().removeClass("active");
        })
      })
      this.getwxconfig()
    },
     activated(){//本地
            if(!this.$route.meta.isUseCache){
              this.goodsShop = [];
              this.page =1;
              this.loadall =false;
              this.busy= false;
              this.loadMore();
            }
            this.$route.meta.isUseCache = false;
                this.shops_liebiao();
                this.zhekou()
                this.loadMore();
     },
     methods:{
       getwxconfig(){
         this.shopsID=this.$route.query.id;
              this.$http.get(this.APIURL_PREFIX+'/api/wap/company/SelectOnly/'+this.shopsID).then((response) => {
                console.log(response)
                this.title=response.data.data.companyName
                this.img=response.data.data.headimgurl
                this.shuoming=response.data.data.slogan
              })

                var vm= this;
          this.$http.get(this.APIURL_PREFIX+"/api/wxs/config?url="+escape(location.href.split('#')[0])).then((response) => {
            console.log(response.data);
             var appid = 'wx488ae3f57360b7ea';
            wx.config({
              debug: false,
              appId: appid,
              timestamp: response.data.data.timestamp,
              nonceStr: response.data.data.noncestr,
              signature: response.data.data.signature,
              jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone','scanQRCode']
            })
            wx.ready(function(){
                wx.onMenuShareTimeline({
                title: vm.title,
                link: "http://"+window.location.host+"/wap/wx/login?fk=1-49-"+localStorage.headid+"-"+vm.shopsID,
                imgUrl:vm.img,
                desc:vm.shuoming,
                success: function () {
                },  
                cancel: function () {
                }
              });
              wx.onMenuShareAppMessage({
                title: vm.title,
                link: "http://"+window.location.host+"/wap/wx/login?fk=1-49-"+localStorage.headid+"-"+vm.shopsID,
                imgUrl:vm.img,
                desc:vm.shuoming,
                success: function () {
                },
                cancel: function () {
                }
              });
            })
          })
       },
        // this.$nextTick(() => {
        //   this.DestroyIncomeStatistics = true;
        // });
       //document.documentElement.scrollTop=380; right-content

         shops_liebiao(){//列表

           this.shopsID=this.$route.query.id;
           console.log(this.shopsID)
           this.$http.get(this.APIURL_PREFIX+'/api/wap/userOnlineCates?goodsProviderId='+this.shopsID).then((response) => {
           this.GoodsTypeCustom=response.data.data

           this.hackitem=true
           console.log(this.GoodsTypeCustom)
                console.log(this.hackitem)
				}).catch(function(err){
					console.log(err)
        })
      },
      shop_shangpin(id,name){ //商品
           this.indx=id;
           this.btName=name;
           this.loadall= false;
           this.page=1;
           this.busy= false;
           this.goodsShop={}
           this.apitype=2;
           this.shops_list()
        },
        zhekou(id){//折扣/热点/新品
        console.log('zhekou')
        console.log(this.type_sp)
        this.type_sp=id
          this.loadall= false;
          this.page=1;
          this.busy= false;
        if(this.type_sp==1){
          this.btName="全部商品"
          this.apitype=0;
          this.shops_list()
        }else if(this.type_sp==2){
          this.btName="折扣商品"
          this.shops_type="discount";
           this.apitype=1;
           this.shops_list()
        }else if(this.type_sp==3){
          this.btName="热销商品"
          this.shops_type="best"
          this.apitype=1;
          this.shops_list()
        }else if(this.type_sp==4){  
          this.btName="新品力推"
          this.shops_type='newest'
          this.apitype=1;
          this.shops_list()
        }
        },
        shops_list(flag){
          console.log('shoplist')
           var apiurl =""
           if(this.apitype==0){//全部商品
              //  apiurl="/api/wap/coupon/goods/custom?goodsProviderId="+this.shopsID+"&goodsOnline=1&page="+this.page+"&rows="+this.pageSize
              apiurl="/api/wap/userLookGoods?goodsProviderId="+this.shopsID+"&goodsOnline=1&page="+this.page+"&rows="+this.pageSize
           }else if(this.apitype==1){//折扣类
              //  apiurl="/api/wap/coupon/goods/custom?goodsProviderId="+this.shopsID+"&goodsOnline=1&page="+this.page+"&rows="+this.pageSize+"&"+this.shops_type+"=1"
              apiurl="/api/wap/userLookGoods?goodsProviderId="+this.shopsID+"&goodsOnline=1&page="+this.page+"&rows="+this.pageSize+"&"+this.shops_type+"=1"
           }else if(this.apitype==2){//普通商品
              //  apiurl="/api/wap/coupon/goods/custom?customTypeId="+this.indx+"&goodsOnline=1&goodsProviderId="+this.shopsID+"&page="+this.page+"&rows="+this.pageSize
              apiurl="/api/wap/userLookGoods?cateId="+this.indx+"&goodsOnline=1&goodsProviderId="+this.shopsID+"&page="+this.page+"&rows="+this.pageSize
           }else{
               layer.msg("抱歉出错了")
           }
           this.$http.get(this.APIURL_PREFIX+apiurl).then((response) => {
             console.log(response)
             this.records=response.data.records
                if(flag){
                    this.goodsShop = this.goodsShop.concat(response.data.data);
                }else{
                    this.goodsShop =response.data.data;
                }
                if(0 == response.data.data.length || response.data.length<this.pageSize){
                    this.busy = true;
                    this.loadall = true;
                }
                else{
                    this.busy = false;
                    this.page++
                }
            });
        },
        loadMore(){
            this.busy = true;
            setTimeout(() => {
                this.shops_list(this.page>1);
            }, 500);
        }
        //折扣热销新品数据接口api/wap/coupon/goods/custom?goodsProvIderId="+this.shopsID+"&goodsOnline=1&page="+this.page+"&rows="+this.pageSize+"&"+this.shops_type+"=1"
        //全部数据接口"/api/wap/coupon/goods/custom?goodsProvIderId="+this.shopsID+"&page=1&rows=24"
        //普通数据'/api/wap/coupon/goods/custom?customTypeId='+this.indx+"&goodsProvIderId="+this.shopsID+"&page="+this.page+"&rows="+this.pageSize
        },
        beforeRouteLeave( to, from,next){
            if (to.name == 'commodity_details') {
                to.meta.isUseCache = true;
            }
            if (to.name == 'Nearby') {
                to.meta.isUseCache = true;
            }
            next();
        }
}
</script>
